<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 40  </title>
    <style>
        div {
            font-size: 30px;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
<div id="root"></div>
</body>
<script>

    const app = Vue.createApp({
        // beforeMount =》 onBeforeMount
        // mounted => onMounted
        // beforeUpdate => onBeforeUpdate
        // beforeUnmount => onBeforeUnmount
        // unmounted => onUnmounted
        setup(props, context) { // setup执行的时间点在beforeCreate和created之间，所以没有这两个生命周期函数
            const {ref, onBeforeMount, onMounted,onBeforeUpdate,onUpdated, onRenderTracked, onRenderTriggered} = Vue;
            const name = ref('张三');
            onBeforeMount(() => {
                console.log('onBeforeMount')
            })
            onMounted(() => {
                console.log('onMounted')
            })

            onBeforeUpdate(() => {
                console.log('onBeforeUpdate')
            })

            onUpdated(() => {
                console.log('onUpdated')
            })

            // 状态跟踪 收集响应式的依赖
            // 每次渲染后重新收集响应式依赖
            onRenderTracked((event) => {
                console.log("状态跟踪组件----------->");
                console.log(event);
            });

            // 每次触发页面重新渲染时自动执行
            onRenderTriggered((event) => {
                console.log("状态触发组件--------------->");
                console.log(event);
            });

            const handleClick = ()=>{
                name.value = '李斯'
            }

            return {name,handleClick}
        },

        template: `
          <div>
            <div @click="handleClick();">Name: {{name}}</div>
          </div>
        `
    });



    const vm = app.mount('#root');
</script>
</html>